<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-button type="primary"
                   icon="el-icon-plus" @click="handleAdd">
          添加
        </el-button>
      </el-form-item>
    </el-form>

    <el-table
      border
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="dictLabel"
        label="地区">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="{row}">
          <el-button
            size="mini"
            type="success"
            @click="update(row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="del(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-loading="loading" :visible.sync="dialogFormVisible">
      <el-form label-width="88px" :model="form">
        <el-form-item label="地区名称">
          <el-input v-model="form.dictLabel" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
    <el-pagination
      background
      style="margin-top: 20px;"
      @current-change="currentChange"
      layout="prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import {delArea, addArea, upArea, getArea} from "@/api/team";
import {deepClone} from "@/utils";

export default {
  name: 'SysRoleList',
  data() {
    return {
      tableData:[],
      dialogFormVisible:false,
      total:0,
      loading:false,
      form:{
        dictLabel:""
      },
      bianji:false,
      current:1
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList(){
      getArea({
        current:this.current,
        size:10
      }).then(res=>{
        console.log(res.data)
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    handleAdd(){
      this.bianji = false
      this.dialogFormVisible = true
    },
    del(row){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delArea(row.dictCode)
        this.$message.success('操作成功')
        this.getList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    currentChange(page){
      this.current=page
      this.getList()
    },
    async submit(){
      if (this.bianji){
        await upArea(this.form)
      }else {
        await addArea(this.form)
      }
      this.dialogFormVisible = false
      this.getList()
      this.$message.success('操作成功')
    },
    update(row){
      this.bianji = true
      this.form = deepClone(row)
      this.dialogFormVisible = true
    }
  }
}
</script>
<style scoped>

</style>
